<template>
  <div class="app-container">
    <el-form ref="form" :model="form"  :inline="true" label-width="68px">
      <el-form-item>
<!--        <el-button type="primary" icon="el-icon-setting" size="mini" @click="handleAd">广告设置</el-button>-->
        <el-button type="primary" icon="el-icon-setting" size="mini" @click="handleAc">文章设置</el-button>
        <el-button type="primary" icon="el-icon-setting" size="mini" @click="handlePd">作品设置</el-button>
        <el-button type="primary" icon="el-icon-setting" size="mini" @click="handleCp">券包设置</el-button>
      </el-form-item>
      <el-row :gutter="100">
        <el-col :span="100">
          <el-card>
            <el-form-item :label="title" prop="dictValue">
              <div class="cs">
                <el-transfer
                  filterable
                  :titles="['可选择','已选择']"
                  :data="list"
                  v-model="dictList">
                </el-transfer>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="butt">
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-form-item>
          </el-card>

        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<style scoped>
.cs >>> .el-transfer-panel {
  width: 450PX;
  height: 600PX;
}

.butt {
  margin: auto;
}
</style>

<script>
import {listPackage, getPackage} from "@/api/couponPackage/package";
import {listAd, getAd} from "@/api/advert/ad";
import {listArticle, getArticle} from "@/api/business/article";
import {listApproveProduct, getProduct, delProduct, addProduct, updateProduct, exportProduct} from "@/api/user/product";
import {listData, getData, updateData, getValueByLabel, getValue } from "@/api/system/dict/data";

export default {
  name: "Position",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 广告数据
      list: [],
      dictList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryPdParams: {
        status: 2
      },
      queryCpParams: {
        status: 110
      },
      queryAcParams: {
        status: 2
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.handleAc()
  },
  methods: {

    /** 设置广告 */
    handleAd() {
      this.title = "广告设置";
      this.getAdList()
    },

    /** 设置文章 */
    handleAc() {
      this.title = "文章设置";
      this.getAcList()
      getValueByLabel("user_article_ids").then(response =>{
        this.dictList = response.data
        console.log(response.data)
      })
    },

    /** 设置券包 */
    handleCp() {
      this.title = "券包设置";
      this.getCpList()
      getValueByLabel("coupon_package_ids").then(response =>{
        this.dictList = response.data
        console.log(response.data)
      })
    },
    /** 设置作品 */
    handlePd() {
      this.title = "作品设置";
      this.getPdList()
      getValueByLabel("user_prod_ids").then(response =>{
        this.dictList = response.data
        console.log(response.data)
      })
    },

    /** 查询广告列表 */
    getAdList() {
      listAd().then(response => {
        this.list = response.rows.map(a => {
          return {
            key: a.id,
            label: a.name
          }

        });
        if (this.form.list) {
          this.dictList = this.form.list.map(a => {
            return a.id
          })}
        // } else {
        //   this.dictList = []
        // }
      });
    },

    /** 查询文章管理列表 */
    getAcList() {
      listArticle().then(response => {
        this.list = response.rows.map(a => {
          return {
            key: a.id,
            label: a.title
          }
        });
        console.log(this.list)
        if (this.form.list) {
          this.dictList = this.form.list.map(a => {
            return a.id
          })}
        // } else {
        //   this.dictList = []
        // }
      });
    },
    /** 查询券包管理列表 */
    getCpList() {
      listPackage().then(response => {
        this.list = response.rows.map(a => {
          return {
            key: a.id,
            label: a.name
          }
        });
        console.log(this.list)
        if (this.form.list) {
          this.dictList = this.form.list.map(a => {
            return a.id
          })}
        // } else {
        //   this.dictList = []
        // }
      });
    },
    /** 查询作品管理列表 */
    getPdList() {
      listApproveProduct(this.queryPdParams).then(response => {
        this.list = response.rows.map(a => {
          return {
            key: a.id,
            label: a.name
          }
        });
        console.log(this.list)
        if (this.form.list) {
          this.dictList = this.form.list.map(a => {
            return a.id
          })}
        // } else {
        //   this.dictList = []
        // }
      });
    },

    /** 提交按钮 */
    submitForm() {
      //this.form.ids = this.dictList.join();
      // if (this.title === "广告设置") {
      //   getData(228).then(response =>{
      //     this.form = response.data
      //     updateData(this.form).then(response => {
      //       this.msgSuccess("修改广告成功");
      //     });
      //   })
      // } else
        if (this.title === "文章设置"){
        getData(228).then(response =>{
          this.form = response.data
          this.form.dictValue = this.dictList.join();
          console.log(this.form.dictValue)
          updateData(this.form).then(response => {
            this.msgSuccess("修改文章成功");
          });
        })
      }else if (this.title === "券包设置"){
        getData(233).then(response =>{
          this.form = response.data
          this.form.dictValue = this.dictList.join();
          console.log(this.form.dictValue)
          updateData(this.form).then(response => {
            this.msgSuccess("修改券包成功");
          });
        })

      }else if (this.title === "作品设置"){
        getData(220).then(response =>{
          this.form = response.data
          this.form.dictValue = this.dictList.join();
          console.log(this.form.dictValue)
          updateData(this.form).then(response => {
            this.msgSuccess("修改作品成功");
          });
        })
      }
    },
  }
};
</script>
